<template>
  <div class="theme-box">
    <div class="theme-color-block">
      <el-color-picker v-model="themeColor" @change="changeTheme"/>
    </div>
    <el-button type="primary" color="#4D99F2" @click="recoverDefault" style="margin-left: 30px;color: #fff;">默认</el-button>
  </div>
</template>

<script setup>
  import { ref } from 'vue'
  import { editTheme } from '@/utils/theme'
  // document.documentElement 是全局变量时
  const el = document.documentElement
  const themeColor = ref(getComputedStyle(el).getPropertyValue(`--el-color-primary`))

  const changeTheme = () => {
    if(process.env.NODE_ENV === 'development') console.log(themeColor.value)
    editTheme(themeColor.value)
  }

  const recoverDefault = () => {
    themeColor.value = "#4D99F2"
    editTheme("#4D99F2")
  }
</script>

<style lang="scss" scoped>
.theme-box{
  display: flex;
  .theme-color-block{
    span{
      font-size: 14px;
    }
    ::v-deep(.el-color-picker__trigger){
      width: 85px;
    }
  }
}

</style>
